<template>
	<view class="main-view">
		<view class="enroll-item dashboard" @click="showOperBoard=!showOperBoard"><text class="item-name">主题</text><text class="item-content">{{title}}</text></view>
		<view style="width:98%;margin-left:1%" v-show="showOperBoard"  class="main-view">
			<view class="enroll-item dashboard"><text class="item-name">报名id</text><text class="item-content">{{eId}}</text></view>
			<view class="enroll-item dashboard">
				<text class="item-name">允许注册用户报名</text>
				<image v-if="enrollLimit.register" class="item-logo" src="../../static/yes.svg">
				<image v-else class="item-logo" src="../../static/no.svg">
			</view>
			<view class="enroll-item dashboard">
				<text class="item-name">使用自动验证</text>
				<image v-if="enrollLimit.autoChecked" class="item-logo" src="../../static/yes.svg">
				<image v-else class="item-logo" src="../../static/no.svg">
			</view>
			<!-- <view v-if="enrollLimit.autoChecked">使用自动验证</view> -->
			<!-- <view v-if="enrollLimit.readOthers">允许查看他人报名信息</view> -->
			<view class="enroll-item dashboard">
				<text class="item-name">最大报名人数</text>
				<text v-if="endMethod.num" class="item-content">{{numLimit}}</text>
				<text v-else class="item-content">无限制</text>
			</view>
			<view class="enroll-item dashboard">
				<text class="item-name">设定截止时间</text>
				<text v-if="endMethod.time" class="item-content">{{planEndTime}}</text>
				<text v-else class="item-content">无限制</text>
			</view>
			<view class="enroll-item dashboard"><text class="item-name">报名启动时间</text><text class="item-content">{{startTime}}</text></view>
			<view class="enroll-item dashboard"><text class="item-name">报名状态</text><text class="item-content">{{status}}</text></view>
			
			<view class="enroll-item dashboard" @click="showQRCode=!showQRCode">
				<text class="item-name">报名二维码</text>
				<image class="item-logo"  src="../../static/QR_code.svg">
			</view>

			<view v-show="showQRCode" class=" dashboard" style="text-align:center;border-bottom:1upx solid black">
				<image class="QRCodeImg" :src="QRImage"/>
			</view>

			<view class="enroll-item dashboard" @click="showAutoCheck=!showAutoCheck" v-if="enrollLimit.autoCheck==1">
				<text class="item-name">自动验证功能</text>
				<image class="item-logo"  src="../../static/Programming.svg">
			</view>

			<view style="border-bottom:1upx solid black" v-if="enrollLimit.autoCheck==1" class="col-arrange dashboard" v-show="showAutoCheck">
				<view class="auto-check-item dashboard">
					<text class="item-name">脚本使用token</text><text class="item-content">{{token}}</text>
				</view>
				<view class="auto-check-item dashboard">
					<text class="item-name">自动审核脚本下载地址，点击右边图标复制</text>
					<image @click="copyDownloadUrl" class="item-logo"  src="../../static/clipboard.svg">
				</view>
			</view>
			<view style="height:150upx">
				<button class="stop-button" style="background-color:blue" type="primary" @click="reuseEnroll">重用报名</button>
			</view>
			<view style="height:150upx">
				<button class="stop-button" type="primary" :disabled="status!='进行中'" @click="stopEnroll">结束报名</button>
			</view>
		</view>
		<!-- <view v-if="!showOperBoard" style="margin-bottom:100upx">

		</view> -->
		
		
		<view class="enroll-item dashboard" @click="showList = !showList" ><text class="item-name">已报名用户列表，点击查看</text></view>
		<view v-show="showList&&enrollData.length>0" style="width:98%;margin-left:1%;height:70upx;padding-top:30upx;" class="enroll-item dashboard" v-if="enrollLimit.autoCheck==1">
			<view v-show="excelUrl.length != 0">
				<text class="item-name">导出excel，点击右侧图标到浏览器中下载excel文件</text>
				<image class="item-logo" @click="copyExcelUrl"  src="../../static/clipboard.svg">
			</view>
			<view v-show="excelUrl.length == 0">
				<text class="item-name">点击右侧图标生成数据导出Excel下载URL</text>
				<image class="item-logo" @click="generateExcelUrl"  src="../../static/generate.svg">
			</view>
		</view>
		<view v-show="showList&&enrollData.length<=0" style="color:gray;margin-left:250upx;width:100%;font-size:40upx">没有用户报名
		</view>
		<view v-show="showList" class="col-arrange" >
			<view style="width:98%;margin-left:1%" @click="enrollDetail(enrollDatum.username)" class="part-item dashboard" v-for="enrollDatum in enrollData" :key="enrollDatum.submitTime">
				<text class="part-title">{{enrollDatum.username}}</text>
				<text class="part-time">{{formatDatetime(new Date(enrollDatum.submitTime))}}</text>
				<text class="part-status" v-bind:style="{color:(enrollDatum.status==0?'rgb(168, 180, 77)':(enrollDatum.status==1?'green':'red'))}">{{enrollDataStatusTran(enrollDatum.status)}}</text>
			</view>
			<button  v-show="enrollData.length>0" @click="more" type="primary" style="width:90%;margin-top:20upx;">加载更多</button>	
		</view>
		
	</view>
</template>
	
	

<script>
	import formatDatetime from "../../common/zdateutil.js"
	import tranUtil from "../../common/znumtranutil.js"
	import h5Copy from '../../common/junyi-h5-copy.js'
	// 引入二维码库  
	import QR from "../../common/wxqrcode.js" // 二维码生成器
	export default {
		
		data() {
			return {
				checked : false,
				endMethod : {},
				enrollLimit : {},
				numLimit : 0,
				planEndTime : "",
				startTime : "",
				status : "",
				title : "",
				enrollData : [],
				formatDatetime : null,
				enrollDataStatusTran : null,
				eId : "",
				token : "",
				QRImage : null,
				showQRCode : false,
				showAutoCheck : false,
				showOperBoard : false,
				showList : false,
				excelUrl : ""
			}
		},
		onLoad : function(option) {
			// console.log(formatDatetime.formatDatetime)
			this.formatDatetime = formatDatetime.formatDatetime;
			this.enrollDataStatusTran = tranUtil.tranUtil.enrollDataStatusTran;
			// console.log(option.id)
			// 获取报名元数据描述
			var vm = this;
			this.eId = option.id;
			var param = {'eId':option.id};
			this.$get(this.enrollurl + '/enroll/metaDesc',param,function(res){
				var data = res.data;
				if(data.code != 0){
					uni.showModal({
						title : '错误',
						content : data.message,
						showCancel : false
					})
				}
				var obj = data.object;
				// console.log(data.object)
				vm.token = obj.token;
				vm.checked = obj.checked;
				vm.endMethod = tranUtil.tranUtil.endMethodTran(obj.endMethod);
				vm.enrollLimit = tranUtil.tranUtil.enrollLimitTran(obj.enrollLimit);
				vm.numLimit = obj.numLimit;
				vm.planEndTime = formatDatetime.formatDatetime(new Date(obj.planEndTime));
				vm.startTime = formatDatetime.formatDatetime(new Date(obj.startTime));
				vm.status = tranUtil.tranUtil.enrollMetaStatusTran(obj.status);
				vm.title = obj.title;
				
				// console.log(img)
			});

			param['lastTimeLong'] = new Date().getTime();
			param['length'] = 10;
			// 请求报名数据
			this.$get(this.enrollurl + '/enroll/dataDescs',param,function(res){
				var data = res.data;
				if(data.code != 0){
					uni.showModal({
						title : '错误',
						content : data.message,
						showCancel : false
					})
				}
				vm.enrollData = data.object;
			});
			let img = QR.createQrCodeImg(option.id, {  
				size: parseInt(300)//二维码大小  
			})
			this.QRImage = img;
		},
		methods: {
			more : function(){
				var vm = this;
				var param = {'length':10,'lastTimeLong':this.enrollData[this.enrollData.length - 1].submitTime}
				this.$get(this.enrollurl + '/enroll/dataDescs',param,function(res){
					var data = res.data;
					if(data.code != 0){
						// vm.errorText = data.message;
						return;
					}
					vm.enrollDatas = vm.enrollData.concat(data.object);
				});
			},
			enrollDetail : function(username){
				// var param = {'eId':this.eId,'username':username};
				// console.log(param);
				uni.navigateTo({
					url : './enrollManageDetail?eId=' + this.eId + '&username=' + username
				})
			},
			showOrHideToken : function(){
				this.showToken = !this.showToken;
			},
			stopEnroll : function(){
				var vm = this;
				uni.showModal({
					title : '删除项目',
					content : '您确定要结束报名吗？',
					success : function(res){
						if(res.confirm){
							// console.log('结束')
							var param = {'eId' : vm.eId};
							vm.$post(vm.enrollurl + '/enroll/updateMetaStatus',param,function(res){
								var data = res.data;
								if(data.code != 0){
									uni.showModal({
										title : '错误',
										content : data.message,
										showCancel : false
									})
									return ;
								}
								uni.navigateTo({url:'./launchedEnrollPage'});
							})
						}
					}
				})
			},
			copyDownloadUrl : function(){
				// #ifdef H5
					let content = this.host + '/file/python.zip' // 复制内容，必须字符串，数字需要转换为字符串
					const result = h5Copy(content)
					if (result === false) {
						uni.showToast({
						title:'不支持',
						})
					} else {
						uni.showToast({
						title:'复制成功',
						icon:'none'
						})
					}
				// #endif
				// #ifndef H5
					uni.setClipboardData({
						data: vm.host + '/file/python.zip',
						success: function () {
							console.log('success');
						}
					});
				// #endif
			},
			generateExcelUrl : function(){
				var param = {'eId':this.eId};
				var vm = this;
				// 获取临时操作token
				this.$get(this.enrollurl + '/enroll/getTempToken',param,function(res){
					var data = res.data;
					if(data.code != 0){
						uni.showModal({
							title : '错误',
							content : data.message,
							showCancel : false
						})
						return ;
					}
					vm.excelUrl = vm.host + '/file/export.html?tempToken=' + data.object;
					// console.log(this.excelUrl)
					
				});
			},
			copyExcelUrl : function(){
				var vm = this;
				// #ifdef H5
					let content = this.excelUrl; // 复制内容，必须字符串，数字需要转换为字符串
					const result = h5Copy(content)
					if (result === false) {
						uni.showToast({
						title:'不支持',
						icon:'none'
						})
					} else {
						uni.showToast({
						title:'复制成功',
						icon:'none'
						})
					}
				// #endif
				// #ifndef H5
					uni.setClipboardData({
						data: vm.excelUrl,
						success: function () {
						console.log('success');
						}
					});
				// #endif
			},
			reuseEnroll : function(){
				var vm = this;
				uni.showModal({
					title : '警告',
					content : '重用报名将会清除之前保存的报名草稿，您要继续吗？',
					success : function(){
						var param = {'eId':vm.eId}
						// 请求重用信息
						vm.$get(vm.enrollurl + '/enroll/getReuseEnrollData',param,function(res){
							var data = res.data;
							if(data.code != 0){
								uni.showModal({
									title : '错误',
									content : data.message,
									showCancel : false
								})
								return;
							}
							uni.setStorage({
								key : 'newEnrollDraft',
								data : JSON.parse(data.object)
							});
							// console.log()
							uni.navigateTo({
								url : './newEnrollDesc'
							})
						});
					}
				})
			}
		}
	}
</script>

<style>
	@import "../../common/zcss.css";
	.main-view{
		width: 100%;
		flex-direction: column;
	}
	.enroll-item{
		border: 1upx solid gray;
		/* border-top: 1upx solid gray; */
		width: 100%;
		height:50upx;
		padding-top: 10upx;
		/* background-color: white; */
		position: relative;
	}
	.item-name{
		position: absolute;
		left: 1%;
		color: gray;
	}
	.item-content{
		position: absolute;
		right: 1%;
	}
	.part-item{
		border: 1upx solid gray;
		/* border-top: 1upx solid gray; */
		width: 100%;
		height:100upx;
		padding-top: 10upx;
		/* background-color: white; */
		position: relative;
	}
	.part-time{
		position: absolute;
		font-size: 20upx;
		color: gray;
		left: 1%;
		bottom: 0%;
	}
	.part-status{
		position: absolute;
		font-size: 20upx;
		right: 1%;
		bottom: 1%;
	}
	.part-title{
		font-size: 50upx;
		position: absolute;
		top: 1%;
		left: 1%;
	}
	.item-logo{
		position: absolute;
		/* font-size: 20upx; */
		height:50upx;
		width: 40upx;
		/* color: gray; */

		right: 1%;
		/* bottom: 0%; */
	}
	.QRCodeImg{
		width: 500upx;
		height:500upx;
		margin:10upx;
		left:100upx;
	}
	.stop-button{
		width:600upx;
		margin-bottom: 30upx;
		margin-top: 30upx;
		background-color: red;
		font-size: 38upx;
	}
	.auto-check-item{
		/* border-bottom: 1upx solid gray; */
		/* border-top: 1upx solid gray; */
		width: 100%;
		height:50upx;
		/* padding-top: 10upx; */
		/* background-color: white; */
		position: relative;
	}
</style>
